React Native基础之语法总结

发表于 | 分类于

前言

最近因为工作需要，开始学习React native，虽然以前学习过js，但都是上大学时候的事了，几年没关注这块了，现在又衍生出很多以js为基础的框架或者编程语言，习惯了Java，现在开始学习React native，最大的两点感觉：

  • React native语法感觉好随意
  • 代码看起来好乱啊

不过既然要开始学习了React native了，就要搞清楚里面的方方面面。通过查看官方文档，Google搜索，大概整理了一些React native中容易忽略的基础东西(本文基于最新的ES6语法)

变量

变量感觉React native和Java或者Python还是有挺多不一样的地方的，作为弱类型语言，React native里面竟然有三个定义变量的关键字：var,let和const

  • var
    这个学过js的应该都清楚，没记错的话js最早一直都是用这个来定义变量

  • let
    之前学习swift的时候，好像swift语法里面也有let这个定义变量的关键字，在React native中，let和var的主要区别是作用域不同，var的作用域是函数内，也就是在一个函数内的任何地方都可以访问或者修改var定义的变量，而使用let定义的变量，只在定义该变量的代码区块内可用

  • const
    这个和let的作用域相同，都在定义改变量的代码块内可用，它和let不同的是，const定义的变量是不可以改变的，类似java中带final的关键字变量，声明的时候需要赋值

函数调用

  • =>(Arrow functions)
    在看React native文档的时候，经常可以看到=>这个符号，比如下面这段代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function getMoviesFromApiAsync() {
      return fetch('https://facebook.github.io/react-native/movies.json')
        .then((response) => response.json())
        .then((responseJson) => {
          return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
    }

    在函数getMoviesFromApiAsync函数里面，两次看到=>这个符号，这个符号官方定义是叫做箭头函数(Arrow functions)，它语法简洁，和java 8中的lambda蛮像的，基本语法如下：

    1
    2
    3
    4
    5
    6
    7
    8
    (param1, param2, …, paramN) => { statements }
    (param1, param2, …, paramN) => expression
      // equivalent to: (param1, param2, …, paramN) => { return expression; }
      // Parentheses are optional when there's only one parameter name:
      (singleParam) => { statements }
      singleParam => { statements }
      // A function with no parameters should be written with a pair of parentheses.
      () => { statements }

    看完基本语法你就会明白上面的例子中(response) => response.json和(responseJson) => {return responseJson.movies;}的含义了：=>前面小括号里面的相当于参数，=>后面相当于函数返回值或者函数表达式

    有几点需要注意的就是：

    • 如果没有参数需要传入，直接写()，切记不可省略
    • 如果只有一个参数，()是可写可不写的
    • 两个以上的参数，()是必须要写的

字符串

在Java中假设你定义了一个String类型的变量name="World"然后需要输出Hello,World!的时候，一般都是printf("Hello," + name + "!")现在在React Native里面这种拼接也是允许的，但还有一种拼接方式如下：

1
`Hello, ${name}!`

这个和Android中字符串format是有点类似的

总结

这次就遇到了大概这些不明白的，然后学习总结了一下，后面遇到新的不明白的再继续总结，其实习惯了，感觉写React native也挺好的！
一个Hello World的React native项目：点击这里!